<!DOCTYPE html>
<html>
	<head>
		<meta name="keywords" content="camicroscope, quip" />
	    <meta charset='utf-8'>
	    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
	    <meta name='viewport' content='width=device-width, initial-scale=1'>

	    <title>Side Menu Unit Test Page</title>

	    <!-- camessage component dependencies -->
		<!-- google material icons css sheet -->
		<link href='/iconfont/material-icons.css' rel='stylesheet'/>
		<!-- css sheet -->
		<link rel='stylesheet' type='text/css' media='all' href='/css/style.css'/>

		<link rel='stylesheet' type='text/css' media='all' href='/components/sidemenu/sidemenu.css'/>
		<!-- util.js -->
		<script src = '/common/util.js' type='text/javascript'></script>
		<!-- message display js -->
		<script src='/components/sidemenu/sidemenu.js'></script>

	</head>
	<body>
		<!-- this is a flag element that indicates the resources has been loaded -->
		<input id='isLoad' type='checkbox' style='display:none;'>
		<!-- ca message test cases -->

		<!-- constructor -->

		<div id = 'menu1'></div>
		<div id = 'menu2'></div>
		<input id='status' type='checkbox'>
		<label id='name'></label>

	</body>
	<!-- test script for each case -->
	<script type = "text/javascript">
		// TODO initialize UI component
		function change(d){
			document.getElementById('status').checked = d.isOpen;
			document.getElementById('name').textContent = d.target.id;
		}
		// case 1: test options to initialize component
		window.menu1 = new SideMenu({id:'menu1',callback:change});
		window.menu1.addContent('<div>1</div><div>2</div>');
		const div = document.createElement('div');
		div.textContent = '3';
		window.menu1.addContent(div);
		const div2 = document.createElement('div');
		div2.textContent = '4';
		window.menu1.addContent(div2);

		window.menu2 = new SideMenu({id:'menu2',isOpen:true,width:500,callback:change});
		window.menu2.addContent('<div>11111<div>');
		window.menu2.clearContent();
		// Never remove this code, this is a flag to told us jsdom loads the anysubresources sucha as scripts, stylesheets or images.
		document.getElementById('isLoad').checked = true;

	</script>
</html>
